import { defineStore } from "pinia";
import { showNotify } from "vant";
import router from "@/router";
import {
  addCart,
  getCarList,
  updateChecked,
  updateNum,
  deleteProduct,
} from "@/api/cart";
import type { AddCartParams } from "@/api/cart";
import { useUseStore } from "./user";

export interface CartItem {
  cartid: string;
  userid: string;
  num: number;
  flag: boolean;
  img1: string;
  proname: string;
  originprice: number;
  proid: string;
  discount: number;
}

export const useCartStore = defineStore("cart", {
  state() {
    return {
      list: [] as CartItem[], //购物车数据
    };
  },

  getters: {
    /**
     * 合计的总价
     * 1.勾选的商品
     * 2.累加 数量*价格
     */
    total(state) {
      //获取勾选的数据集合
      let checkedList = state.list.filter((item) => item.flag);
      //使用reduce做累加
      let total = checkedList.reduce((total, item) => {
        return (total += item.originprice * item.num);
      }, 0);
      //组件需要的是分的单位
      return total * 100;
    },

    /**
     * 是否全选
     */
    isAll(state) {
      // 数组中是否每一项都满足条件
      if (state.list.length) {
        return state.list.every((item) => item.flag);
      } else {
        return false;
      }
    },
  },

  actions: {
    /**
     * 将商品添加至购物车
     * @param data
     */
    async add(data: AddCartParams) {
      // 调用接口
      await addCart(data);
      //使用showNotify组件提示成功
      showNotify({
        type: "success",
        duration: 1000,
        // message: "加入购物车成功", onClose: () => {
        //     //提示完成后跳转到购物车页面
        //     router.push({ name: "cart" })
        // },
        message: "加入购物车成功",
      });
    },

    /**
     * 获取购物车列表数据
     */
    async getList() {
      //自定义组合式函数一般只能在setu入口的顶级调用，原因是这个组合式函数与组件需要建立练习，好在组件销毁时，将组合式函数中写的一些全局绑定的事件也能销毁

      //pinia的store的组合式函数，它返回的实例对象中方法，它内部也没有需要根组件强关联的事件
      const userStore = useUseStore();
      const response = await getCarList(userStore.userid);
      this.list = response.data;
    //   console.log(this.list);
    },

    /**
     * 更新某个商品的勾选状态
     * @param cartid 购物车商品Id
     * @param flag 勾选状态
     */
    async setChecked(cartid: string, flag: boolean) {
      //调用接口修改数据
      await updateChecked(cartid, flag);
      // 让页面更新的方式：
      //1.重新获取下列表数据
      // this.getList();
      //2.直接修改对应的数据中的flag的值
      //  1.获取对应数据的下标
      const index = this.list.findIndex((item) => item.cartid === cartid);
      // console.log('index',index)
      this.list[index].flag = flag;
    },

    /**
     * 修改商品数量
     * @param cartid 购物车商品id
     * @param num 商品数量
     */
    async setNum(cartid: string, num: number) {
      //调用接口,修改数据
      await updateNum(cartid, num);
      //发现不更新 this.list中对应的 数据的 num 也OK，原因是什么？
      //受控与非受控
      //  1.获取对应数据的下标
      const index = this.list.findIndex((item) => item.cartid === cartid);
      // console.log('index',index)
      this.list[index].num = num;
    },

    /**
     * 删除单个商品
     * @param cartid 购物车id
     */
    async deleteCart(cartid: string) {
      //调用接口，删除该条商品数据
      await deleteProduct(cartid);
      //使用showNotify组件提示成功
      showNotify({
        type: "success",
        duration: 1000,
        message: "删除商品成功",
      });
    },
  },
});
